<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
    .password-header {
        margin-bottom: 30px;
    }
    
    .password-title {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
    }
    
    .password-subtitle {
        color: #666;
        font-size: 16px;
    }
    
    .password-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 40px;
        max-width: 500px;
        border: 1px solid #e5e5e5;
    }
    
    .form-group {
        margin-bottom: 24px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #1a1a1a;
        font-weight: 600;
        font-size: 14px;
    }
    
    .form-group input {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e5e5;
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease;
        background: #fafafa;
        color: #1a1a1a;
    }
    
    .form-group input:focus {
        outline: none;
        border-color: #333;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
    
    .password-strength {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .strength-weak {
        color: #d32f2f;
    }
    
    .strength-medium {
        color: #f57c00;
    }
    
    .strength-strong {
        color: #388e3c;
    }
    
    .strength-bar {
        height: 4px;
        background: #e5e5e5;
        border-radius: 2px;
        margin-top: 4px;
        overflow: hidden;
    }
    
    .strength-fill {
        height: 100%;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    .strength-fill.weak {
        background: #d32f2f;
        width: 33%;
    }
    
    .strength-fill.medium {
        background: #f57c00;
        width: 66%;
    }
    
    .strength-fill.strong {
        background: #388e3c;
        width: 100%;
    }
    
    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid #e5e5e5;
    }
    
    .btn {
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-primary {
        background: #1a1a1a;
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .btn-primary:hover {
        background: #333;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .btn-secondary {
        background: white;
        color: #1a1a1a;
        border: 2px solid #e5e5e5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn-secondary:hover {
        background: #f5f5f5;
        border-color: #333;
        transform: translateY(-1px);
    }
    
    .message {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
    }
    
    .message.success {
        background: #e8f5e8;
        color: #2e7d32;
        border-left: 4px solid #4caf50;
    }
    
    .message.error {
        background: #ffebee;
        color: #c62828;
        border-left: 4px solid #f44336;
    }
    
    .password-requirements {
        background: #f8f8f8;
        padding: 16px;
        border-radius: 8px;
        margin-top: 16px;
        border-left: 4px solid #1a1a1a;
    }
    
    .requirements-title {
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    .requirements-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
        color: #666;
    }
    
    .requirements-list li {
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .requirement-met {
        color: #388e3c;
    }
    
    .requirement-unmet {
        color: #666;
    }
</style>

<div class="password-header">
    <div class="password-title">修改密码</div>
    <div class="password-subtitle">更新您的账户密码</div>
</div>

<div class="password-card">
    <c:if test="${not empty msg}">
        <div class="message success">${msg}</div>
    </c:if>
    <c:if test="${not empty error}">
        <div class="message error">${error}</div>
    </c:if>
    
    <form action="/user/changePassword" method="post" id="changePasswordForm">
        <div class="form-group">
            <label for="oldPassword">当前密码</label>
            <input type="password" id="oldPassword" name="oldPassword" required placeholder="请输入当前密码">
        </div>
        
        <div class="form-group">
            <label for="newPassword">新密码</label>
            <input type="password" id="newPassword" name="newPassword" required placeholder="请输入新密码">
            <div class="password-strength" id="passwordStrength"></div>
            <div class="strength-bar">
                <div class="strength-fill" id="strengthFill"></div>
            </div>
        </div>
        
        <div class="form-group">
            <label for="confirmPassword">确认新密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required placeholder="请再次输入新密码">
        </div>
        
        <div class="password-requirements">
            <div class="requirements-title">密码要求</div>
            <ul class="requirements-list" id="requirementsList">
                <li class="requirement-unmet" id="req-length">
                    <span>•</span>
                    至少8个字符
                </li>
                <li class="requirement-unmet" id="req-uppercase">
                    <span>•</span>
                    包含大写字母
                </li>
                <li class="requirement-unmet" id="req-lowercase">
                    <span>•</span>
                    包含小写字母
                </li>
                <li class="requirement-unmet" id="req-number">
                    <span>•</span>
                    包含数字
                </li>
                <li class="requirement-unmet" id="req-special">
                    <span>•</span>
                    包含特殊字符
                </li>
            </ul>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="submitBtn">
                <span>🔒</span>
                修改密码
            </button>
            <a href="/user/profile" class="btn btn-secondary">
                <span>↩️</span>
                返回资料
            </a>
        </div>
    </form>
</div>

<script>
    const newPassword = document.getElementById('newPassword');
    const confirmPassword = document.getElementById('confirmPassword');
    const passwordStrength = document.getElementById('passwordStrength');
    const strengthFill = document.getElementById('strengthFill');
    const submitBtn = document.getElementById('submitBtn');
    
    // 密码强度检测
    function checkPasswordStrength(password) {
        let score = 0;
        let requirements = {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            number: /[0-9]/.test(password),
            special: /[^A-Za-z0-9]/.test(password)
        };
        
        // 更新要求列表
        Object.keys(requirements).forEach(req => {
            const element = document.getElementById('req-' + req);
            if (requirements[req]) {
                element.className = 'requirement-met';
                score++;
            } else {
                element.className = 'requirement-unmet';
            }
        });
        
        // 更新强度显示
        if (score < 2) {
            passwordStrength.textContent = '密码强度：弱';
            passwordStrength.className = 'password-strength strength-weak';
            strengthFill.className = 'strength-fill weak';
        } else if (score < 4) {
            passwordStrength.textContent = '密码强度：中等';
            passwordStrength.className = 'password-strength strength-medium';
            strengthFill.className = 'strength-fill medium';
        } else {
            passwordStrength.textContent = '密码强度：强';
            passwordStrength.className = 'password-strength strength-strong';
            strengthFill.className = 'strength-fill strong';
        }
        
        return score >= 3; // 至少满足3个要求
    }
    
    // 监听密码输入
    newPassword.addEventListener('input', function() {
        const password = this.value;
        if (password.length > 0) {
            checkPasswordStrength(password);
        } else {
            passwordStrength.textContent = '';
            strengthFill.className = 'strength-fill';
        }
    });
    
    // 表单验证
    document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
        const oldPwd = document.getElementById('oldPassword').value;
        const newPwd = newPassword.value;
        const confirmPwd = confirmPassword.value;
        
        if (newPwd !== confirmPwd) {
            alert('两次输入的新密码不一致');
            e.preventDefault();
            return false;
        }
        
        if (newPwd.length < 8) {
            alert('新密码长度至少8位');
            e.preventDefault();
            return false;
        }
        
        if (!checkPasswordStrength(newPwd)) {
            alert('新密码强度不够，请满足更多要求');
            e.preventDefault();
            return false;
        }
        
        if (oldPwd === newPwd) {
            alert('新密码不能与当前密码相同');
            e.preventDefault();
            return false;
        }
    });
    
    // 确认密码验证
    confirmPassword.addEventListener('input', function() {
        const newPwd = newPassword.value;
        const confirmPwd = this.value;
        
        if (confirmPwd.length > 0 && newPwd !== confirmPwd) {
            this.style.borderColor = '#d32f2f';
        } else {
            this.style.borderColor = '#e5e5e5';
        }
    });
</script> 